<!--
 * @Author: your name
 * @Date: 2022-03-27 15:37:05
 * @LastEditTime: 2022-04-04 16:54:13
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /vite-vue-app/src/components/svg-icon.vue
-->
<template>
  <svg
    class="svg-icon"
    :class="className"
    :style="{ fontSize: size + 'px' }"
    aria-hidden="true"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script>
import { computed, defineComponent } from "vue";

export default defineComponent({
  name: "SvgIcon",
  props: {
    prefix: {
      type: String,
      default: "icon",
    },
    filename: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: "#333",
    },
    size: {
      type: Number,
      required: false,
      default: 16,
    },
    className: {
      type: [Array, String],
      required: false,
      default: "",
    },
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.filename}`);
    return { symbolId };
  },
});
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: middle;
}
</style>
